CSS Grid -raitojen koon määritys: Sisäisen ja ulkoisen koon hallinta

CSS Grid Layout on tehokas työkalu monimutkaisten ja responsiivisten web-asetteluiden luomiseen. Yksi sen keskeisistä vahvuuksista on sen joustavat raitojen koon määritysominaisuudet, jotka mahdollistavat rivien ja sarakkeiden koon tarkan hallinnan. Eri raitojen koon määrityksen avainsanojen ja funktioiden ymmärtäminen on ratkaisevan tärkeää mukautuvien ja ylläpidettävien asetteluiden rakentamisessa. Tämä artikkeli syventyy CSS Gridin sisäisen ja ulkoisen koon määrityksen edistyneisiin konsepteihin ja tutkii, kuinka niiden avulla voidaan luoda asetteluita, jotka mukautuvat sulavasti erilaisiin sisältöihin ja näyttökokoihin.

Grid-raitojen ja koon määrityksen ymmärtäminen

Ennen kuin sukellamme sisäisen ja ulkoisen koon määrityksen yksityiskohtiin, kerrataan CSS Grid -raitojen peruskäsitteet.

Mitä ovat Grid-raidat?

Grid-raidat ovat grid-asettelun rivejä ja sarakkeita. Ne määrittelevät rakenteen, johon grid-elementit sijoitetaan. Näiden raitojen koko vaikuttaa suoraan kokonaisasetteluun ja siihen, miten sisältö jakautuu gridissä.

Raitojen kokojen määrittäminen

Voit määrittää raitojen koot käyttämällä grid-template-rows- ja grid-template-columns-ominaisuuksia. Nämä ominaisuudet hyväksyvät välilyönneillä erotellun luettelon arvoista, joissa kukin arvo edustaa vastaavan raidan kokoa. Esimerkiksi:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

Tämä koodi luo gridin, jossa on kolme saraketta ja kaksi riviä. Ensimmäinen ja kolmas sarake vievät kumpikin 1 osan (fr) käytettävissä olevasta tilasta, kun taas toinen sarake vie 2 osaa. Rivien koko määräytyy automaattisesti niiden sisällön perusteella.

Sisäinen vs. ulkoinen koon määritys

Edistyneen grid-raitojen koon määrityksen ydin on sisäisen ja ulkoisen koon määrityksen välisen eron ymmärtämisessä. Nämä käsitteet määrittävät, miten raidan koko päätellään sen sisällön ja käytettävissä olevan tilan perusteella.

Sisäinen koon määritys: Sisällön ohjaama

Sisäinen koon määritys tarkoittaa, että grid-raidan koko määräytyy kyseiseen raitaan sijoitettujen grid-elementtien sisällön perusteella. Raita laajenee tai supistuu sisällön mukaan tiettyihin rajoihin asti. Sisäisen koon määrityksen avainsanoja ovat:

• auto: Oletusarvo. Raidan koko määräytyy raidan grid-elementtien suurimman vähimmäiskokovaatimuksen mukaan. Useimmissa tapauksissa tämä tarkoittaa käytännössä sitä, että raita on riittävän suuri sopimaan kaikkeen sisältöön ylivuotamatta, mutta siihen voivat vaikuttaa grid-elementeille asetetut min-width/min-height-arvot.
• min-content: Raita mitoitetaan sopimaan pienimpään tilaan, jonka sisältö tarvitsee ylivuotamatta. Esimerkiksi teksti rivittyy pienimmässä mahdollisessa kohdassa, vaikka se rikkoisi sanoja kömpelösti.
• max-content: Raita mitoitetaan sopimaan suurimpaan tilaan, jonka sisältö tarvitsee ylivuotamatta. Tekstin kohdalla tämä tarkoittaa, että se yrittää välttää rivittymistä mahdollisimman paljon, mikä voi johtaa erittäin leveisiin tai korkeisiin raitoihin.
• fit-content(length): Raita mitoitetaan pienemmän arvon mukaan joko max-content-sisällöstä tai määritetystä length-arvosta. Tämä mahdollistaa raidan enimmäiskoon asettamisen samalla, kun se voi supistua sisällön mukaan.

Esimerkki: Sisäinen koon määritys min-content- ja max-content-arvoilla

Harkitse tilannetta, jossa on kaksi saraketta. Ensimmäisen sarakkeen koko on määritetty min-content-arvolla ja toisen max-content-arvolla. Jos ensimmäisen sarakkeen sisältö on pitkä sana, se jaetaan pienimmän sisällön koon mukaan sopivaksi. Toinen sarake sen sijaan laajenee sisällön mukaan ilman rivitystä.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

Tässä esimerkissä sana "Supercalifragilisticexpialidocious" jaetaan usealle riville ensimmäisessä sarakkeessa, kun taas "Short text" pysyy yhdellä rivillä toisessa sarakkeessa. Tämä osoittaa, kuinka sisäinen koon määritys mukautuu sisällön luontaisiin kokovaatimuksiin.

Esimerkki: Sisäinen koon määritys fit-content()-funktiolla

`fit-content()`-funktio on hyödyllinen, kun haluat raidan olevan sisällön kokoinen, mutta sille halutaan asettaa myös enimmäiskokorajoitus. Tämän avulla voidaan estää sarakkeita tai rivejä kasvamasta liian suuriksi, samalla kun ne voivat kutistua, jos sisältö on pienempi.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä ensimmäinen sarake laajenee sopimaan sisältöönsä, mutta ei ylitä 200 pikselin leveyttä. Toinen sarake vie jäljelle jäävän tilan. Tämä on hyödyllistä luotaessa asetteluita, joissa halutaan sarakkeen olevan joustava, mutta ei vievän liikaa tilaa.

Ulkoinen koon määritys: Tilan ohjaama

Ulkoinen koon määritys puolestaan tarkoittaa, että grid-raidan koko määräytyy sisällön ulkopuolisten tekijöiden, kuten grid-säiliön käytettävissä olevan tilan tai kiinteän kokoarvon, perusteella. Ulkoisen koon määrityksen avainsanoja ovat:

• length: Kiinteä pituusarvo (esim. 100px, 2em, 50vh). Raita on täsmälleen tämän kokoinen sisällöstä riippumatta.
• percentage: Prosenttiosuus grid-säiliön koosta (esim. 50%). Raita vie tämän prosenttiosuuden käytettävissä olevasta tilasta.
• fr (fractional unit): Edustaa osaa grid-säiliön käytettävissä olevasta tilasta sen jälkeen, kun kaikki muut raidat on mitoitettu. Tämä on joustavin tapa jakaa tilaa raitojen kesken.

Esimerkki: Ulkoinen koon määritys fr-yksiköillä

fr-yksikkö on korvaamaton luotaessa responsiivisia asetteluita, jotka mukautuvat eri näyttökokoihin. Määrittämällä raidoille osayksiköitä varmistat, että ne jakavat käytettävissä olevan tilan suhteellisesti.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä grid-säiliössä on kaksi saraketta. Ensimmäinen sarake vie yhden osan käytettävissä olevasta tilasta, kun taas toinen sarake vie kaksi osaa. Jos grid-säiliö on 600 pikseliä leveä, ensimmäinen sarake on 200 pikseliä leveä ja toinen 400 pikseliä leveä (vähennettynä mahdollisella grid-välillä). Tämä varmistaa, että sarakkeet säilyttävät aina suhteellisen kokonsa näyttökoosta riippumatta.

Esimerkki: Ulkoinen koon määritys prosenttiosuuksilla ja kiinteillä pituuksilla

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä ensimmäisen sarakkeen leveydeksi on asetettu kiinteä 200px. Toinen sarake vie 50 % grid-säiliön leveydestä. Viimeinen, kolmas sarake käyttää 1fr-yksikköä, joten se vie kaiken tilan, joka jää jäljelle kahden ensimmäisen sarakkeen mitoituksen jälkeen.

Sisäisen ja ulkoisen koon määrityksen yhdistäminen: minmax()

minmax()-funktio mahdollistaa sisäisen ja ulkoisen koon määrityksen yhdistämisen, mikä antaa entistä paremman hallinnan raitojen kokoihin. Se määrittelee raidalle hyväksyttävän kokovälin määrittämällä sekä vähimmäis- että enimmäisarvon.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: Raidan vähimmäiskoko. Tämä voi olla mikä tahansa kelvollinen raidan koon määritysarvo, mukaan lukien sisäiset avainsanat (auto, min-content, max-content) tai ulkoiset arvot (length, percentage, fr).
• max: Raidan enimmäiskoko. Tämä voi myös olla mikä tahansa kelvollinen raidan koon määritysarvo. Jos max-arvo on pienempi kuin min-arvo, max-arvo ohitetaan ja käytetään min-arvoa.

Esimerkki: minmax()-funktion käyttö responsiivisissa sarakkeissa

Yleinen käyttötapaus minmax()-funktiolle on luoda responsiivisia sarakkeita, joilla on vähimmäisleveys, mutta jotka voivat laajentua täyttämään käytettävissä olevan tilan.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä repeat(auto-fit, minmax(200px, 1fr)) luo niin monta saraketta kuin mahdollista, jotka ovat vähintään 200 pikseliä leveitä, mutta voivat laajentua täyttämään jäljellä olevan tilan. auto-fit-avainsana varmistaa, että tyhjät sarakkeet kutistetaan, mikä luo joustavan ja responsiivisen asettelun.

Esimerkki: minmax()-funktion yhdistäminen sisäiseen koon määritykseen

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä ensimmäinen sarake on vähintään yhtä leveä kuin sen vähimmäissisällön koko, mutta se ei ylitä 300px. Toinen sarake vie jäljelle jäävän tilan.

Käytännön sovellukset ja parhaat käytännöt

Sisäisen ja ulkoisen koon määrityksen ymmärtäminen on ratkaisevan tärkeää vankkojen ja mukautuvien asetteluiden luomisessa. Tässä on joitakin käytännön sovelluksia ja parhaita käytäntöjä, jotka kannattaa pitää mielessä:

• Responsiivinen navigaatio: Käytä minmax()-funktiota luodaksesi navigaatioelementtejä, joilla on vähimmäisleveys, mutta jotka voivat laajentua täyttämään käytettävissä olevan tilan navigaatiopalkissa.
• Joustavat korttiasettelut: Käytä repeat(auto-fit, minmax()) -rakennetta luodaksesi korttiasetteluita, jotka mukautuvat automaattisesti eri näyttökokoihin ja varmistavat, että kortit rivittyvät sulavasti pienemmillä näytöillä.
• Sisältötietoiset sivupalkit: Käytä min-content- tai max-content-arvoja sivupalkkien koon määrittämiseen niiden sisällön perusteella, jolloin ne voivat laajentua tai supistua tarpeen mukaan.
• Vältä kiinteitä leveyksiä: Minimoi kiinteiden leveyksien (px) käyttöä ja suosi suhteellisia yksiköitä (%, fr, em) luodaksesi asetteluita, jotka mukautuvat eri näyttökokoihin ja käyttäjäasetuksiin.
• Testaa huolellisesti: Testaa aina grid-asettelusi eri laitteilla ja näyttökooilla varmistaaksesi, että ne hahmontuvat oikein ja tarjoavat yhtenäisen käyttökokemuksen.

Edistyneet Grid-koonmääritystekniikat

Perusavainsanojen ja -funktioiden lisäksi CSS Grid tarjoaa edistyneempiä tekniikoita raitojen koon hienosäätöön.

repeat()-funktio

repeat()-funktio yksinkertaistaa useiden samankokoisten raitojen luomista. Se ottaa kaksi argumenttia: toistojen määrän ja raidan koon.

            repeat(number, track-size)
            

              
                Copy
              
            
          

Esimerkiksi:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

Tämä on sama kuin:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

repeat()-funktiota voidaan käyttää myös auto-fit- ja auto-fill-avainsanojen kanssa luodaksesi responsiivisia grid-asetteluita, jotka mukautuvat automaattisesti käytettävissä olevaan tilaan.

auto-fit- ja auto-fill-avainsanat

Näitä avainsanoja käytetään repeat()-funktion kanssa luomaan responsiivisia gridejä, jotka mukautuvat gridin elementtien määrään ja käytettävissä olevaan tilaan. Keskeinen ero niiden välillä on siinä, miten ne käsittelevät tyhjiä raitoja.

• auto-fit: Jos kaikki raidat ovat tyhjiä, ne kutistuvat 0 leveyteen.
• auto-fill: Jos kaikki raidat ovat tyhjiä, ne säilyttävät kokonsa.

Esimerkki: auto-fit-avainsanan käyttö responsiivisissa sarakkeissa

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä grid luo niin monta saraketta kuin mahdollista, jotka ovat vähintään 200 pikseliä leveitä, mutta voivat laajentua täyttämään jäljellä olevan tilan. Jos elementtejä ei ole tarpeeksi täyttämään kaikkia sarakkeita, tyhjät sarakkeet kutistuvat 0 leveyteen.

Huomioitavaa kansainvälistämisessä (i18n) ja lokalisoinnissa (l10n)

Kun suunnitellaan asetteluita globaalille yleisölle, on tärkeää ottaa huomioon eri kielten ja kirjoitussuuntien vaikutus. Tekstin pituus voi vaihdella merkittävästi eri kielten välillä, mikä voi vaikuttaa asetteluun, jos raitojen kokoja ei ole määritetty oikein. Tässä on muutamia vinkkejä kansainvälistettyjen asetteluiden suunnitteluun:

• Käytä suhteellisia yksiköitä: Suosi suhteellisia yksiköitä, kuten em, rem ja prosenttiosuuksia, kiinteiden yksiköiden, kuten pikselien, sijaan, jotta teksti voi skaalautua käyttäjän kirjasinkokoasetusten mukaan.
• Sisäinen koon määritys: Hyödynnä sisäisen koon määrityksen avainsanoja, kuten min-content, max-content ja fit-content(), varmistaaksesi, että raidat mukautuvat sisällön kokoon kielestä riippumatta.
• Loogiset ominaisuudet: Käytä loogisia ominaisuuksia, kuten inline-start ja inline-end, fyysisten ominaisuuksien, kuten left ja right, sijaan tukeaksesi sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) kirjoitettavia kieliä.
• Testaus: Testaa asettelusi eri kielillä ja kirjoitussuunnilla mahdollisten ongelmien tunnistamiseksi ja korjaamiseksi. Simuloi pidempiä merkkijonoja, joita voi esiintyä eri kielissä.

Yhteenveto

CSS Grid -raitojen koon määritys on tehokas ja monipuolinen työkalu responsiivisten ja mukautuvien web-asetteluiden luomiseen. Hallitsemalla sisäisen ja ulkoisen koon määrityksen käsitteet, ymmärtämällä minmax()-funktion ja hyödyntämällä repeat()-funktiota, voit rakentaa asetteluita, jotka mukautuvat sulavasti erilaisiin sisältöihin ja näyttökokoihin. Muista ottaa huomioon kansainvälistämisen ja lokalisoinnin vaikutus suunnitellessasi globaalille yleisölle.

Kokeile erilaisia raitojen koon määritystekniikoita ja tutustu CSS Gridin loputtomiin mahdollisuuksiin. Harjoittelun ja näiden käsitteiden vankan ymmärryksen avulla olet hyvin varustautunut luomaan hienostuneita ja käyttäjäystävällisiä web-asetteluita mihin tahansa projektiin.